<!-- 想定管理的页面 -->
<template>
        <n-layout embedded content-style="padding: 24px;">
            <n-card>
                <n-space vertical :size="12"> 
                    <n-space>
                        <n-button @click="scenarioLoad">
                            加载想定
                        </n-button>
                        <n-button @click="scenarioReplay">
                            回放想定
                        </n-button>
                        <n-button @click="scenarioUpdataAndAdd(1)">
                            新增想定
                        </n-button>
                        <n-button @click="scenarioUpdataAndAdd(2)">
                            修改想定
                        </n-button>
                        <n-button @click="scenarioDel">
                            删除想定
                        </n-button>
                    </n-space>
                    <n-data-table
                        :columns="columns"
                        :data="datas"
                        :pagination="pagination"
                        :bordered="true"
                        :max-height="250"
                        :scroll-x="800"
                        :row-key="rowKey"
                        @update:checked-row-keys="handleCheck"
                        striped 
                    />
                </n-space>
            </n-card>
            <!-- 想定的新增和修改页面，在这个页面中实现，想定管理类必须在之前完成 -->
        </n-layout>
</template>
<script>
import { NButton, NCard, NLayoutFooter,NDataTable,NSpace, useModal, NLayout } from 'naive-ui';
import { getCurrentInstance,h } from 'vue'
import { useStore } from 'vuex';
import ScenarioEdit from './ScenarioEdit.vue';

export default {
    components: {
        NCard,NButton, NLayoutFooter,NDataTable,NSpace,NLayout
    },
    props: {
        modal: {
            type: Object
        }
    },
    data(){
        return{
            scenarioDeduce:useStore().state.scenarioDeduce,
            selectScenarios:undefined,
            rowKey:(row) => row.scenarioId
        }
    },
    setup() {
        const { proxy } = getCurrentInstance();
        const modalChild = useModal();
        
         //关闭父组件中的modal，需要事件提交到父组件
         const closeModal = () => {
            proxy.modal.destroy();
        }

        const showMag = msg=>{
            const mgsModal = modalChild.create({
                title: "提示",
                preset: "card",
                style: {
                    width: "200px"
                },
                content: msg,
                footer: () => h(
                NButton,
                { type: "primary", onClick: () => mgsModal.destroy() },
                    () => "关闭"
                )
            });
        }

        const store = useStore();
        let scenarioDeduce = store.state.scenarioDeduce;
        const datas = scenarioDeduce.getScenarioManager().getAllScenarios();
        console.log(scenarioDeduce);
        

        ///获得对应的数据，从Store中获得数据,这里模拟的数据
        // const datas = Array.from({ length: 46 }).map((_, index) => ({
        //     scenarioId:index,
        //     scenarioName: `Edward King ${index}`,
        //     sceanrioCreateTime: commonMethod.dateFormat(new Date()),
        //     scenarioDecs: `London, Park Lane no.想定的对应数据描述 ${index}`
        //     }));

       const checkSelectScenarios = ()=>{
            if(proxy.selectScenarios == undefined || proxy.selectScenarios.length == 0){
                return {
                    object:undefined,
                    msg:"没有选定想定！"
                };
            }
            if(proxy.selectScenarios.length != 1){
                return {
                    object:undefined,
                    msg:"不可以同时加载多个想定！"
                };
            }
            //设置当前的想定
            return {
                object: proxy.selectScenarios[0],
                msg:undefined
            };
        }

        /**
         * 加载想定后，可以编辑，也可以不编辑
         */
        const scenarioLoad = ()=>{
            console.log("加载想定。。。")
            let s = checkSelectScenarios();
            if(s.object == undefined){
                showMag(s.msg)
                return
            }
            proxy.scenarioDeduce.deployScenario(s);
            store.state.isEditScenario = true;
            store.commit("setEditScenario",true);
            store.commit("setScenarioName",s.scenarioName);

            closeModal();
        }
        /**
         * 回放，不可修改
         */
       const scenarioReplay = () => {
           let curScenario = checkSelectScenarios();
           if(curScenario.object == undefined){
                if(curScenario.msg != undefined){
                    showMag(curScenario.msg)
                    return;
                }       
            }

            //进行回放
        }
        /**
         * 这是想定基本信息的增和改
         * @param n 表示新增或修改
         */
        const scenarioUpdataAndAdd = n=>{

            let curScenario = checkSelectScenarios();
            let sm = proxy.scenarioDeduce.getScenarioManager();
            if(n == 1){
                curScenario = sm.createScenarion()
            }else{
                if(curScenario.object == undefined){
                    if(curScenario.msg != undefined){
                        showMag(curScenario.msg)
                        return;
                    }       
                }
            }    
            const scenarioPlaneOptions ={
                title: n==1?"新增想定":"修改想定",
                preset: 'card',
                maskClosable:false,
                style: {
                    width: '500px'
                },
                content: ()=>h(ScenarioEdit,{scenario:curScenario}),
                footer:()=>
                    h(
                        NButton,
                        { type: "primary", 
                        onClick: () =>{
                            if(curScenario.getScenarioName() == undefined){
                                showMag("想定名称必须填写！");
                                return;
                            }
                            console.log(curScenario);
                            
                            //可以观察父子间的变量是否是双向绑定的
                            sm.updateScenario(curScenario);
                            proxy.scenarioDeduce.deployScenario(curScenario)
                            store.commit("setEditScenario",true);
                            store.commit("setScenarioName",curScenario.scenarioName);
                            //此是保存后的回调
                            childM.destroy();
                            closeModal(); 
                            }},
                        () => "保存"
                    ),
                onclose:()=>{
                    curScenario.destroy()
                    proxy.scenarioDeduce.delectScenarios([curScenario]);
                    store.state.isEditScenario = false;
                    store.state.scenarioName = "";
                }
            }
            const childM = modalChild.create(scenarioPlaneOptions);
        }

        const scenarioDel = ()=>{
            //删除想定，可以多个删除
            if(proxy.selectScenarios == undefined || proxy.selectScenarios.length == 0){
                 showMag("没有选定加载想定")
                return
            }
            proxy.scenarioDeduce.delectScenarios(proxy.selectScenarios[0])
        }

        const handleCheck = (rowKeys)=>{
            proxy.selectScenarios = rowKeys;
        }


        //创造对应的行
        //根据数据生成表格
        const createColums=()=>{
            return[{
                type: "selection",
                width:30
                },{
                    title: "想定名称",
                    key: "scenarioName",
                    align: "left"
                    // width:100
                },{
                    title: "s创建时间",
                    key: "sceanrioCreateTime",
                    align: "left",
                    width:240
                },{
                    title: "想定描述",
                    key: "scenarioDescription",
                    align: "left"
                    // width:200
                }
            ]
        }

        return {
            scenarioDeduce:scenarioDeduce,
            datas:datas,
            columns:createColums(),
            pagination:{pageSize:5},
            closeModal,handleCheck,
            scenarioLoad,scenarioReplay,scenarioUpdataAndAdd,scenarioDel

        }
    },
}
</script>